<template>
  <div class="header_nav">
    <el-row>
      <el-col :span="18">
        <span class="nav_title">快乐星球</span>
        <span class="nav_href">
          <span class="nav_item" @click="goToAbout('home')">星球首页</span>
          <span class="nav_item" @click="goToAbout('aboutPlane')">关于星球</span>
          <span class="nav_item" @click="goToAbout('mechanism')">星球机制</span>
          <!-- <span class="nav_item" @click="goToAbout('planeNews')">星球新闻</span> -->
          <span class="nav_item" @click="goToAbout('whitePaper')">星球白皮书</span>
          <span class="nav_item" @click="goToAbout('joinPlane')">加入星球</span>
          <span class="nav_item" @click="goToAbout('contactUs')">联系我们</span>
        </span>
      </el-col>
      <el-col :span="6">
        <div class="textright">
          <img
            @click="navHandle"
            v-show="!isDropdownMenu"
            class="imgright"
            :src="navMoreimg"
            alt=""
          />
          <img
            @click="navHandle"
            v-show="isDropdownMenu"
            class="imgright"
            :src="navCloseimg"
            alt=""
          />
          <span class="nav_item" @click="onlogin">注册星球</span>
          <!-- <span class="nav_item" style="margin-right: 20px">中文 en</span> -->
        </div>
      </el-col>
    </el-row>

    <div class="dropdown_menu" v-if="isDropdownMenu">
      <span class="nav_item_li" @click="goToAbout('home')">星球首页</span>
      <span class="nav_item_li" @click="goToAbout('aboutPlane')">关于星球</span>
      <span class="nav_item_li" @click="goToAbout('mechanism')">星球机制</span>
      <!-- <span class="nav_item_li" @click="goToAbout('planeNews')">星球新闻</span> -->
      <span class="nav_item_li" @click="goToAbout('whitePaper')">星球白皮书</span>
      <span class="nav_item_li" @click="goToAbout('joinPlane')">加入星球</span>
      <span class="nav_item_li" @click="goToAbout('contactUs')">联系我们</span>
    </div>
     <div v-if="contextMenuVisibleregister" class="clickMenure">
      <div style="width: 45%; height: 100%">
        <el-carousel style="height: 100%; width: 100%" :autoplay="false">
          <el-carousel-item v-for="(item, index) in imglist" :key="index">
            <div
              class="imgbg"
              :style="{ backgroundImage: 'url(' + item.img + ')' }"
            ></div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 55%; padding: 50px 30px">
        <div class="iconclass" @click="handleClose">
          <i class="el-icon-close"></i>
        </div>
        <div class="logintext01">
          加入<span style="font-weight: 700">快乐星球</span>
        </div>
        <div style="margin-top: 25px">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="60px"
            class="demo-ruleForm"
          >
            <el-form-item label="邮箱">
              <el-input
                :rules="[
                  {
                    required: true,
                    message: '请输入邮箱地址',
                    trigger: 'blur',
                  },
                  {
                    type: 'email',
                    message: '请输入正确的邮箱地址',
                    trigger: ['blur', 'change'],
                  },
                ]"
                v-model="ruleForm.emial"
                autocomplete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input
                type="password"
                v-model="ruleForm.pass"
                autocomplete="off"
                show-password
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div></div>
        <div class="bottonclass"  @click="register" style="margin-top: 24px">注册</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener("click", this.checkClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.checkClickOutside);
  },

  data() {
    return {
      screenWidth: "",
      ruleForm: {
        emial: "",
        pass: "",
        uname: "",
        name: "",
        checked: false,
        checked01: false,
        checked02: false,
        checked03: false,
        checked04: false,
        checked05: false,
      },
      imglist: [
        {
          img: require("@/assets/img/切图_03.png"),
        },
        {
          img: require("@/assets/img/切图_03.png"),
        },
      ],
      contextMenuVisible: false,
      contextMenuVisibleregister: false,
      contextMenuVisibleregisterPhone: false,
    };
  },
  methods: {
   async register() {
      try {
        const response = await axios.post("http://localhost:8080/api/v1/register", this.form, {
          headers: {
            "Content-Type": "application/json",
          },
        });
        this.responseMessage = `Registration successful: ${response.data.message}`;
      } catch (error) {
        this.responseMessage = `Error: ${error.response?.data?.message || error.message}`;
      }
    },
     onlogin() {
      this.contextMenuVisibleregister = true;
    },
    handleClose() {
      this.contextMenuVisibleregister = false;
      this.contextMenuVisibleregisterPhone = false;
    },
    checkClickOutside(event) {
      if (!this.$el.contains(event.target)) {
        this.isDropdownMenu = false;
      } else if (
        this.$el.contains(event.target) &&
        event.target.tagName !== "IMG"
      ) {
        this.isDropdownMenu = false;
      }
    },
    goToAbout(val) {
      switch (val) {
        case "aboutPlane":
          if (this.$route.path !== "/aboutPlane") {
            this.$router.push("/aboutPlane");
          }
          break;
        case "home":
          if (this.$route.path !== "/home") {
            this.$router.push("/home");
          }
          break;
        case "mechanism":
          if (this.$route.path !== "/mechanism") {
            this.$router.push("/mechanism");
          }
          break;
        case "joinPlane":
          if (this.$route.path !== "/joinPlane") {
            this.$router.push("/joinPlane");
          }
          break;
        case "whitePaper":
          if (this.$route.path !== "/whitePaper") {
            this.$router.push("/whitePaper");
          }
          break;
        case "planeNews":
          if (this.$route.path !== "/planeNews") {
            this.$router.push("/planeNews");
          }
          break;
        case "contactUs":
          if (this.$route.path !== "/contactUs") {
            this.$router.push("/contactUs");
          }
          break;
      }
    },
    navHandle() {
      this.isDropdownMenu = !this.isDropdownMenu;
    },
  },
};
</script>
<
<style lang="less" scoped>
.header_nav {
  position: fixed;
  top: 0;
  background: #000;
  z-index: 2;
  width: 100%;
  padding: 12px 0px;
  .nav_title {
    margin: 0 6px 0 24px;
    font-size: 24px;
    font-weight: 700;
    font-family: cursive;
    background: linear-gradient(
      to bottom,
      #c805ff,
      #2549fc
    ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/

    -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/

    -webkit-text-fill-color: transparent; /*给文字设置成透明*/
    vertical-align: middle;
  }
  .nav_item {
    padding: 2px 6px;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    margin: 0 6px;
  }
  .download_item {
    padding: 2px 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    margin: 0 6px;
  }
  .textright {
    text-align: right;
  }
  .imgright{
    height: 25px;
    width: 25px;
    padding-right: 16px;
    cursor: pointer;
  }
  .marright {
    margin-right: 24px;
  }
}
.imgright{
    display: none;
  }
.dropdown_menu {
  position: absolute;
  right: 2rem;
  top: 50px;
  width: 300px;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(15px);
  border-radius:10px;
  overflow: hidden;
  display: none;
  .nav_item_li{
    padding:0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.9rem;
  }
}
@media(max-width:992px){
  .nav_href{
    display: none;
  }
  .dropdown_menu{
    display: block;
  }
  .imgright{
    display: inline-block;
  }
}

@media(max-width:576px){
  .dropdown_menu {
    left: 2rem;
    width: unset;
  }
}

</style>
<style lang="less" scoped>
.section {
  height: 100vh;
  background-position-y: -70px;
  background-size: 100% 106%;
  background-repeat: no-repeat;
  touch-action: none;
  transform: translate3d(0px, 0px, 0px);
  transition: transform 700ms ease 0s;
  background-position: center;
}
.imgbg {
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  touch-action: none;
}
.iconclass {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #b0b0b0;
}
.logintext01 {
  color: #0b283f;
  font-size: 20px;
  font-weight: 500;
  font-style: normal;
  line-height: 40px;
  text-decoration: none;
  text-transform: none;
}
.logintext02 {
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 22px;
  text-decoration: none;
  text-transform: none;
  color: #2196f3;
}
.logintext03 {
  margin-top: 48px;
  color: #243b4d;
  font-size: 16px;
  width: 68px;
  line-height: 30px;
  border-bottom: 2px solid transparent;
  -o-border-image: linear-gradient(
    90deg,
    #2196f3 -7.57%,
    #2196f3 -7.56%,
    #a5fecb 103.63%
  );
  border-image: linear-gradient(
    90deg,
    #2196f3 -7.57%,
    #2196f3 -7.56%,
    #a5fecb 103.63%
  );
  border-image-slice: 1;
}
.logintext04 {
  color: #2196f3;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 22px;
  text-decoration: none;
  text-transform: none;
}
.bottonclass {
  background: var(
    --Linear,
    linear-gradient(90deg, #2196f3 -7.57%, #2196f3 -7.56%, #a5fecb 103.63%)
  );
  color: white;
  display: flex;
  height: 36px;
  padding: 5px 24px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 16px;
  border-width: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  line-height: 22px;
  text-decoration: none;
  text-transform: none;
}
.retext01 {
  display: flex;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  line-height: 18px;
  text-decoration: none;
  text-transform: capitalize;
}
.clickMenu {
  position: fixed;
  z-index: 9999;
  width: 750px;
  height: 540px;
  margin-top: -270px;
  margin-left: -325px;
  background-color: rgba(255, 255, 255);
  border-radius: 8px;
  display: flex;
  left: 50%;
  top: 50%;
  font-size: 14px;
}
.clickMenure {
  position: fixed;
  z-index: 9999;
  width: 750px;
  height: 570px;
  margin-top: -284px;
  margin-left: -335px;
  background-color: rgba(255, 255, 255);
  border-radius: 8px;
  display: flex;
  left: 50%;
  top: 50%;
  font-size: 14px;
}
.checkedc {
  margin-left: 10px;
}
.headertext {
  color: #fff;
  font-size: 30px;
  padding-top: 150px;
  padding-left: 150px;
}
.mainitem {
  // padding-top: 50px;
  display: flex;
  justify-content: space-evenly;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // margin-left: 50px;
  // padding: 0 6%;
  // margin-top: 30px;
}
.text_bg {
  color: #fff;
  width: 100%;
  // height: 600px;
  background-size: 100% 100%;
}
.text_bgdiv {
  font-weight: 700;
  display: flex;
  font-size: 34px;
  color: #90c7ff;
  height: 600px;
  flex-direction: column-reverse;
  justify-content: center;
  text-align: center;
}
.text_bgdiv01 {
  font-weight: 700;
  font-size: 34px;
  color: #90c7ff;
  margin-top: 50px;
  text-align: center;
}
.text_bgdiv02 {
  font-size: 18px;
  line-height: 34px;
  padding: 0 40px;
  color: #90c7ff;
}
.fotertext {
  color: #c7c8c9;
  margin-top: 20px;
  font-size: 18px;
  line-height: 45px;
  margin-left: 10%;
  padding-bottom: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.mainphone {
  display: none;
}
@media (max-width: 992px) {
  .mainitem {
    display: none;
  }
  .mainphone {
    display: block;
  }

  .text_bgdiv {
    height: unset !important;
    padding: 100px 0;
  }

  .fotertext {
    margin-left: 0 !important;
    padding: 0 40px;
    position: unset;
  }
}

@media (max-width: 576px) {
  .main {
    background-size: cover !important;
  }
  .mainitem {
    display: none;
  }
  .mainphone {
    display: block;
  }

  .section {
    overflow: hidden;
    overflow-y: auto;
    background-size: cover;
  }

  .text_bg {
    padding-bottom: 20px;
    &:nth-child(1) {
      margin-top: 60px;
    }
  }

  .text_bgdiv {
    height: unset !important;
    padding: 100px 0;
  }

  .fotertext {
    margin-left: 0 !important;
    padding: 0 20px;
    position: unset;
  }
}
</style>